<template>
  <div class="profile">
    <div class="banner"></div>
    <div class="info">
      <div class="avatar">
        <img src="~assets/img/avator.jpg" alt="">
      </div>
      <p class="username">{{username}}</p>
      <p class="describe">{{describe}}</p>
      <router-link to="/profile/edit" tag="button" v-if="showEdit" @click.native="showEdit = false">编辑个人资料</router-link>
      <router-link to="/profile/content" tag="button" v-else @click.native="showEdit = true">查看个人资料</router-link>
    </div>
    <router-view class="container"></router-view>
  </div>
</template>

<script>
  export default {
    name: 'Profile',
    data() {
      return {
        username: 'minus',
        describe: '描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述',
        showEdit: true
      }
    }
  }
</script>

<style scoped>
  .banner {
    height: 300px;
    background: url("~assets/img/banner.jpg") center center no-repeat;
  }

  .info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 250px;
    left: 100px;
  }

  .avatar img {
    width: 100px;
    height: 100px;
    border-radius: 100%;
    margin-bottom: 20px;
  }

  .info p.username {
    font-size: 24px;
    margin-bottom: 20px;
  }

  .info p.describe {
    width: 150px;
    font-size: 15px;
    margin-bottom: 20px;
    /* 多行文本溢出隐藏 */
    display: -webkit-box;
    word-break: break-all;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: pre-line;
  }

  .info button {
    height: 30px;
    background-color: #86a3b1;
    border: 2px solid #86a3b1;
    border-radius: 30px;
    color: #fff;
    padding: 5px 10px;
    cursor: pointer;
  }

  .info button:hover {
    background-color: #fff;
    color: #86a3b1;
  }

  .container {
    width: 900px;
    /* height: 500px; */
    background-color: #F2F3FF;
    border-radius: 10px;
    margin: 50px 200px 100px 350px;
    padding: 40px 30px;
  }
</style>